<template>
  <div class="cordlist">
    <div class="cord_list p_r30 p_l30 m_b20">
      <div class="cord_item flex m_t20" v-for="(item, index) in cordlist" :key="index" :style="{background: item.bgcolor}">
        <div class="cord_imgbox"><img :src="item.icon" /></div>
        <div class="cordinfo color_ff flex-1">
          <div class="font_size32">{{item.name}}</div>
          <div class="font_size24">持卡人：{{item.real_name}}</div>
          <div class="font_size32 p_t30">{{item.card_number}}</div>
        </div>
        <div class="t_right">
          <img @click="delbankFn(item.id,item.name,item.card_number ,index)" class="colsebank_img" src="../../assets/img/bank/colse_bank.png"/>
        </div>
      </div>
    </div>
    <div class=" bg_colorff line90 flex p_l30 p_r30 m_t50" @click="addFn">
      <div>
        <img class="jia_icon" src="../../assets/img/bank/jia.png"/>
      </div>
      <div class="color_33 font_size32">添加银行</div>
      <div class="flex-1 t_right"><img class="left_icon" src="../../assets/img/icon/jiantou_left.png"/></div>
    </div>

    <section class="layer" v-if="isdel">
      <div class="layerbox">
        <div class="delinfo t_center">
          <img class="del_img" src="../../assets/img/bank/del_bankimg.png"/>
          <div class="font_size32 color_33 m_t20 p_t30">是否删除该银行卡</div>
          <div class="font_size24 color_99 m_t20"><span>{{bankname}}</span><span>{{cardnum}}</span></div>
        </div>
        <div class="del_btn flex t_center font_size28 color_33">
          <div class="flex-1" @click="delFn(1)">确认</div>
          <div class="flex-1 border_l" @click="delFn(2)">取消</div>
        </div>
      </div>
    </section>

  </div>
</template>

<script>
    export default {
      name: "cordlist",
      data(){
          return{
            cordlist: [],
            isdel: false,
            bank_id: '',
            bankindex:'',
            cardnum:'',
            bankname: ''
          }
      },
      created(){
        console.log(this.$store.state.userinfo)
        this.getlist()
      },
      methods:{
        getlist(){
          this.$util.get('user/getUserBankCardList',{
            uid: this.$store.state.userinfo.uid
          }).then(data => {
            if(data.status == 1){
              this.cordlist = data.data
            }
          })
        },
        delbankFn(id,name, num, index){
          var self = this
          self.isdel = !self.isdel
          self.bank_id = id
          self.bankname = name
          self.cardnum = num
          self.bankindex = index
        },
        delFn(type){
          var self = this
          self.isdel = !self.isdel
          if(type == 1){
            self.$util.get('user/deleteUserBankCard', {
              uid: this.$store.state.userinfo.uid,
              bank_card_id: self.bank_id
            }).then(data => {
              if(data.status == 1){
                this.$toast('删除成功')
                this.cordlist.splice(this.bankindex,1)
              } else {
                this.$toast(data.message)
              }
            })
          }
        },
        addFn(){
          this.$router.push('/addcord')
        }
      }
    }
</script>

<style lang="less" scoped>
  @import "../../assets/css/public";
  @import "../../assets/css/bankcord/bankcord";
</style>
